<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#map_canvas { height: 100% }
		</style>
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=true">
		</script>
		<script type="text/javascript">
			
			var overlay;

			function initialize() {
			  var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
			  var myOptions = {
				zoom: 11,
				center: myLatLng,
				mapTypeId: google.maps.MapTypeId.SATELLITE
			  };

			  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			  var swBound = new google.maps.LatLng(62.281819, -150.287132);
			  var neBound = new google.maps.LatLng(62.400471, -150.005608);
			  var bounds = new google.maps.LatLngBounds(swBound, neBound);

			  // Photograph courtesy of the U.S. Geological Survey
			  var srcImage = 'images/talkeetna.png';
			  overlay = new USGSOverlay(bounds, map);
			}
			
			function USGSOverlay(bounds, map) {

			  // Now initialize all properties.
			  this.bounds_ = bounds;
			  this.text_ = "Hej";
			  this.map_ = map;

			  // We define a property to hold the image's
			  // div. We'll actually create this div
			  // upon receipt of the add() method so we'll
			  // leave it null for now.
			  this.div_ = null;

			  // Explicitly call setMap() on this overlay
			  this.setMap(map);
			}

			USGSOverlay.prototype = new google.maps.OverlayView();
			
			USGSOverlay.prototype.onAdd = function() {

			  // Note: an overlay's receipt of onAdd() indicates that
			  // the map's panes are now available for attaching
			  // the overlay to the map via the DOM.

			  // Create the DIV and set some basic attributes.
			  var div = document.createElement('DIV');
			  div.style.border = "none";
			  div.style.borderWidth = "0px";
			  div.style.position = "absolute";

			  // Create an IMG element and attach it to the DIV.
			  var img = document.createElement("span");
			  img.innerHTML = this.text_;
			  div.appendChild(img);

			  // Set the overlay's div_ property to this DIV
			  this.div_ = div;

			  // We add an overlay to a map via one of the map's panes.
			  // We'll add this overlay to the overlayImage pane.
			  var panes = this.getPanes();
			  panes.overlayLayer.appendChild(div);
			}
			
			USGSOverlay.prototype.draw = function() {

			  // Size and position the overlay. We use a southwest and northeast
			  // position of the overlay to peg it to the correct position and size.
			  // We need to retrieve the projection from this overlay to do this.
			  var overlayProjection = this.getProjection();

			  // Retrieve the southwest and northeast coordinates of this overlay
			  // in latlngs and convert them to pixels coordinates.
			  // We'll use these coordinates to resize the DIV.
			  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
			  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

			  // Resize the image's DIV to fit the indicated dimensions.
			  var div = this.div_;
			  div.style.left = sw.x + 'px';
			  div.style.top = ne.y + 'px';
			  div.style.width = (ne.x - sw.x) + 'px';
			  div.style.height = (sw.y - ne.y) + 'px';
			}
			
			USGSOverlay.prototype.onRemove = function() {
			  this.div_.parentNode.removeChild(this.div_);
			  this.div_ = null;
			}
			
			// Note that the visibility property must be a string enclosed in quotes
			USGSOverlay.prototype.hide = function() {
			  if (this.div_) {
				this.div_.style.visibility = "hidden";
			  }
			}

			USGSOverlay.prototype.show = function() {
			  if (this.div_) {
				this.div_.style.visibility = "visible";
			  }
			}

			USGSOverlay.prototype.toggle = function() {
			  if (this.div_) {
				if (this.div_.style.visibility == "hidden") {
				  this.show();
				} else {
				  this.hide();
				}
			  }
			}

			USGSOverlay.prototype.toggleDOM = function() {
			  if (this.getMap()) {
				this.setMap(null);
			  } else {
				this.setMap(this.map_);
			  }
			}
			
		</script>
	</head>
	<body onload="initialize()">
		<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
</html>